
<template>
  <div class="navBar">
    <div class="navL">
      <!-- logo -->
      <div class="logoBox">
        <router-link to="Home">
          <img src="../assets/logo/logo.png" alt="" />
        </router-link>
        
      </div>

      <!-- 定位 -->
      <div class="locationBtn">
        <span class="el-icon-location"></span>
      </div>

      <!-- 余额 -->
      <div class="balance">
        <router-link to="drawMoney">
           <span class="iconfont icon-rechargefill"></span>
        <strong>￥</strong>
        <font>52.0</font>
        </router-link>
       
      </div>
    </div>

    <div class="navR">
      <!-- 用户头像 -->
      <div class="headerImg" @mouseover=" menuShow = true">
         <router-link to="imgUpload"><img src="../assets/img/defaultImg.jpg" alt="" /></router-link>
        <strong class="headerT">王花花</strong>
      </div>

      <!-- 控制台 -->
      <div class="console">
        <router-link to="console" class="consoleLink">控制台</router-link>
      </div>
    </div>
    <!-- 二级菜单 -->
    <div class="consoleMenu" v-show="menuShow" @mouseout=" menuShow = false" @mouseover=" menuShow = true">
      <div class="userBox">
         <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
         <p>151002563558</p>
      </div>
      <div class="menuBox">
        <ul>
          <li><router-link to="">我的钱包</router-link></li>
          <li><router-link to="userInfo">个人信息</router-link></li>
          <li><router-link to="security">安全管理</router-link></li>
          <li><router-link to="">更多福利</router-link></li>
        </ul>
      </div>
      <div class="exit">退出登录</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "headerBar",
  data() {
    return {
       menuShow:false,
      activeIndex: "1",
      activeIndex2: "1",
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style scoped lang="less">
.navbar_children {
  width: auto;
  height: 70px;
  padding: 10px 20px;
  box-sizing: border-box;
}
.navBar {
  position: relative;
  width: 100%;
  height: 70px;
  background-color: #061d3c;
  background: url(../assets/img/footer-bg.jpg) no-repeat;
  background-size: 100% 100%;
  background-position: right center;
  .consoleMenu{
    position: absolute;
    top: 70px;
    right: 0;
    z-index: 999;
    width: 250px;
    height: 232px;
    background-color: #fff;
    box-shadow: #00000033 0px 1px 3px;
    .userBox{
      height: 52px;
      width: 100%;
      padding: 6px 15px;
      box-sizing: border-box;
      border-bottom: 1px #efefef solid;
      span{
        float: left;
      }
      p{
        float: left;
        line-height: 40px;
        font-size: 14px;
        color: #666;
        text-align: left;
        margin: 0;
        padding-left: 10px;
        box-sizing: border-box;
      }
    }
    .menuBox{
      width: 100%;
      height: auto;
      overflow: hidden;
      padding: 10px 15px;
      box-sizing: border-box;
      ul{
        margin: 0;
        padding: 0;
        li{
          list-style: none;
          height: 30px;
          a{
            display: block;
            line-height: 30px;
            text-align: left;
            font-size: 14px;
            color: #666;
            text-decoration: none;
            &:hover{
                 font-weight: bold;
            }
          }
        }
        
      }
    }
    .exit{
      width: 100%;
      height: 40px;
      line-height: 40px;
      background-color: #dedede;
      font-size: 14px;
      color: #333;
      text-align: center;
      cursor: pointer;
    }
  }
  .navL {
    float: left;
    .navbar_children();
  .logoBox{
    float: left;
    width: auto;
    height: 50px;
    margin-right: 15px;
    cursor: pointer;
    img{
      display: block;
      width: auto;
      height: 32px;
      margin: 9px 0px;
    }
  }
  .locationBtn{
    float: left;
    width: auto;
    height: 50px;
    cursor: pointer;
    margin-right: 30px;
    span{
      display: block;
      width: auto;
      font-size: 24px;
      line-height: 50px;
      color: #dedede;
    }
  }
  .balance{
    float: left;
    width: auto;
    height: 50px;
    cursor: pointer;
      transition: all 0.5s;
      &:hover{
      margin-left: 10px;
    }
    span{
      float: left;
      display: inline-block;
      width: auto;
      font-size: 30px;
      line-height: 50px;
      color: #f2981a;
      margin-right: 15px;
    }
    strong{
      float: left;
      display: inline-block;
      font-size: 16px;
      color: #fff;
      line-height: 50px;
    }
    font{
      float: left;
      display: inline-block;
      font-size: 16px;
      color: #ff0000;
      line-height: 50px;
    }
  }
  }
  .navR{
    float: right;
    .navbar_children();
    .headerImg{
      float: left;
      width: auto;
      height: 40px;
      margin: 5px 15px;
      overflow: hidden;
      cursor: pointer;
      img{
        float: left;
        display: block;
        width: 40px;
        height: 40px;
        border-radius: 20px;
        margin-right: 15px;
      }
      strong{
        float: left;
        font-size: 14px;
        color: #fff;
        line-height: 40px;
      }
    }
    .console{
      float: left;
      width: auto;
      height: 50px;
      .consoleLink{
        font-size: 14px;
        color: #fff;
        line-height: 50px;
        text-decoration: none;
        font-weight: bold;
      }
    }
  }
}
</style>
